<template>
	<view style="padding-bottom: 130rpx">
		<view class="orderInfo">
			<view class="flex-row-center-sb">
				<text class="title">订单号：{{ order.orderNo | filterNull }}</text>
				<text style="color: #00bfbf; max-width: 300rpx; margin-right: 20rpx; font-size: 28rpx"
					>待取车</text
				>
			</view>

			<u-line color="#efefef" margin="30rpx 0"></u-line>

			<view class="text-line flex-row-center">
				<text class="text-name">客户姓名:</text>
				<text class="text-value" style="margin-right: 20rpx">{{
					order.memberName | filterNull
				}}</text>
			</view>

			<view class="text-line flex-row-center">
				<text class="text-name">联系方式:</text>
				<text class="text-value" style="margin-right: 20rpx">{{
					order.memberPhone | filterNull
				}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">预定车辆:</text>
				<text class="text-value">({{ order.carNo }}) {{ order.modelName }}</text>
			</view>
			<view>
				<view class="text-line">
					<view class="text-value start-time">预取:{{ order.rentalStartTime | filterNull }}</view>
					<view class="text-value end-time">预还:{{ order.rentalEndTime | filterNull }}</view>
				</view>
			</view>
		</view>

		<view class="boxContrainer">
			<view class="titlBox"><text class="title">交车验车单</text></view>
			<u--form
				class="item"
				label-width="100"
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="uForm">
				<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

				<u-form-item
					label="车辆油量:"
					prop="fuelCapacity"
					required
					ref="fuelCapacity"
					class="fuelCapacity">
					<!-- <u--input v-model="form.fuelCapacity" placeholder="请填写车辆油量"></u--input> -->
					<view v-if="order.control == '0'">
						<view style="width: 85%; display: inline-block">
							<u-slider v-model="form.fuelCapacity" min="0" :max="16"></u-slider>
						</view>
						<view style="width: 10%; display: inline-block">
							<text>{{ form.fuelCapacity }}/16</text>
						</view>
					</view>
					<view style="width: 100%" v-if="order.control == '1'">
						<view>
							<text v-if="form.fuelType == '1'">{{ form.fuelCapacity }} %</text>
							<text v-if="form.fuelType == '0'">{{ form.fuelCapacity }} 升</text>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="车辆公里数:" prop="vehicleMileage" required ref="vehicleMileage">
					<u--input
						v-model="form.vehicleMileage"
						type="number"
						placeholder="请填写车辆公里数"></u--input>
				</u-form-item>

				<u-form-item label="车辆随车物品:" prop="accessoryItems" ref="accessoryItems">
					<view class="checkbox-box">
						<uni-data-checkbox
							mode="tag"
							multiple
							v-model="accessoryItems"
							:localdata="carAccessoriesList"
							@change="checkAccessories"></uni-data-checkbox>
					</view>
				</u-form-item>

				<u-form-item label="取车时间:" prop="takeAlsoTime" required ref="takeAlsoTime">
					<uni-datetime-picker type="datetime" v-model="form.takeAlsoTime" />
				</u-form-item>

				<u-form-item label="其他描述:" prop="remark" ref="remark">
					<u--textarea
						style="width: 480rpx"
						v-model="form.remark"
						count
						maxlength="200"
						placeholder="请填写其他描述"></u--textarea>
				</u-form-item>
				<view class="text-line"><text class="text-name">车身照片</text></view>
				<view class="text-line"
					><sr-upload maxCount="10" @uploadResult="bodyImageChange"></sr-upload
				></view>

				<view class="text-line"><text class="text-name">仪表盘/油表照片</text></view>
				<view class="text-line"
					><sr-upload maxCount="10" @uploadResult="panelImageChange"></sr-upload
				></view>

				<view class="text-line"><text class="text-name">车辆内饰照片</text></view>
				<view class="text-line"
					><sr-upload maxCount="10" @uploadResult="interiorImageChange"></sr-upload
				></view>

				<view class="text-line"><text class="text-name">车辆划痕照片</text></view>
				<view class="text-line"
					><sr-upload maxCount="10" @uploadResult="scratchImageChange"></sr-upload
				></view>

				<view class="text-line"><text class="text-name">交车验车视频</text></view>
				<view class="text-line"
					><sr-upload maxCount="1" accept="video" @uploadResult="uploadVideo"></sr-upload
				></view>

				<view class="signImage-box">
					<u-form-item label="客户签名:" prop="signImage" ref="signImage">
						<image
							:src="signImage"
							@click="test"
							style="height: 90px; width: 100%; border: 0.5px #dadbde solid"></image>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<button type="info" class="sub-btn" @click="distribution">保&nbsp;&nbsp;存</button>
	</view>
</template>

<script>
	import srUpload from "@/components/upload/sr-upload.vue";
	import orderInfo from "./component/orderInfo.vue";
	import * as api from "@/api/order-api.js";
	import settings from "@/settings.js";
	export default {
		components: {
			srUpload,
			orderInfo,
		},
		data() {
			return {
				show: false,
				order: {},
				escrowInfo: {},
				takeAlsoTime: Number(new Date()),
				accessoryItems: [],
				signImage: "",
				form: {
					orderNo: "", //订单编号   必传
					type: 1, //类型(1交车验车,2还车验车)   必传
					fuelCapacity: 0, //车辆油量
					fuelType: 0,
					vehicleMileage: undefined, //公里数
					accessoryItems: "", //车辆随车物品(逗号隔开)
					remark: "", //其他描述
					takeAlsoTime: this.parseTime(new Date()), //取还车时间
					lkosten: 0.0, //补充油费(还车验车)
					bodyImage: [], //车身照片
					panelImage: [], //仪表盘
					interiorImage: [], //内饰照片
					scratchImage: [], //车辆划痕
					videoUrls: [], //验车视频
					signImage: [], //客户签名,
					escrowUnitPrice: "", //托管单价
				},
				carAccessoriesList: [],
				rules: {
					vehicleMileage: {
						type: "number",
						required: true,
						message: "请填写车辆公里数",
						trigger: ["blur", "change"],
					},
					// accessoryItems: {
					// 	type: 'string',
					// 	min: 1,
					// 	required: true,
					// 	message: '请选择车辆随车物品',
					// 	trigger: ['change']
					// },
					takeAlsoTime: {
						type: "string",
						min: 2,
						required: true,
						message: "请选择取车时间",
						trigger: ["blur", "change"],
					},
					escrowUnitPrice: {
						type: "number",
						required: true,
						message: "请填写托管单价",
						trigger: ["blur", "change"],
					},
					// signImage: {
					// 	type: 'array',
					// 	min: 1,
					// 	required: true,
					// 	message: '客户签名不能为空',
					// 	trigger: ['change']
					// },
					isVehicleKey: false,
				},
			};
		},
		methods: {
			getEscrowByOrderNo() {
				api.getEscrowByOrderNo(this.form.orderNo).then((res) => {
					this.escrowInfo = res.data;
					this.form.escrowUnitPrice = this.escrowInfo.escrowUnitPrice || "";
				});
			},

			test() {
				uni.navigateTo({
					url: "/order/shortOrder/component/sign",
				});
			},
			carAccessories() {
				api.car_accessories().then((res) => {
					res.data.map((item) => {
						this.carAccessoriesList.push({
							value: item.dictValue,
							text: item.dictLabel,
						});
					});
				});
			},
			carOil() {
				api.car_oil(this.order.carId).then((res) => {
					if (res.data) {
						this.isVehicleKey = true;
						this.form.fuelCapacity = res.data.fuelLevel;
						this.form.fuelType = res.data.fuelType;
						this.form.vehicleMileage = res.data.mileage;
					} else {
						this.isVehicleKey = false;
					}
				});
			},
			distribution() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						uni.showLoading({
							title: "提交中...",
							mask: true,
						});
						let param = {
							...this.form,
							takeAlsoTime: this.parseTime(this.form.takeAlsoTime),
						};
						api.delivery(param).then((data) => {
							uni.$emit("refreshOrder");
							this.$u.toast("提交成功");
							uni.navigateBack({
								animationDuration: 300,
							});
							uni.hideLoading();
						});
					})
					.catch((errors) => {
						uni.$u.toast("必填项不能为空");
					});
			},
			checkAccessories() {
				if (this.accessoryItems && this.accessoryItems.length > 0) {
					let arr = [];
					this.carAccessoriesList.forEach((item) => {
						if (this.accessoryItems.indexOf(item.value) > -1) {
							arr.push(item.text);
						}
					});
					this.form.accessoryItems = arr.join(",");
				} else {
					this.accessoryItems = "";
				}
			},
			check(e) {
				//正则表达试
				e = e.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.form.escrowUnitPrice = e;
				});
			},
			bodyImageChange(data) {
				this.form.bodyImage = data;
			},
			panelImageChange(data) {
				this.form.panelImage = data;
			},
			interiorImageChange(data) {
				this.form.interiorImage = data;
			},
			scratchImageChange(data) {
				this.form.scratchImage = data;
			},
			uploadVideo(data) {
				this.form.videoUrls = data;
			},
			// 日期格式化
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
				let date;
				if (typeof time === "object") {
					date = time;
				} else {
					if (typeof time === "string" && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === "string") {
						time = time
							.replace(new RegExp(/-/gm), "/")
							.replace("T", " ")
							.replace(new RegExp(/\.[\d]{3}/gm), "");
					}
					if (typeof time === "number" && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay(),
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === "a") {
						return ["日", "一", "二", "三", "四", "五", "六"][value];
					}
					if (result.length > 0 && value < 10) {
						value = "0" + value;
					}
					return value || 0;
				});
				return time_str;
			},
		},
		onLoad: function (option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.form.orderNo = this.order.orderNo;
			this.getEscrowByOrderNo();
			this.carAccessories();
			this.carOil();
			uni.$on("singImg", (data) => {
				let arr = [];
				arr.push(data.saveUrl);
				this.form.signImage = arr;
				this.signImage = settings.baseImageUrl + data.saveUrl;
			});
		},
	};
</script>

<style>
	.orderInfo {
		margin: 20rpx;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.formInfo {
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		padding-bottom: 120rpx;
	}

	.text-name {
		width: 155rpx;
		color: #303133;
		font-size: 15px;
	}

	.text-line {
		margin: 0 20rpx 20rpx 20rpx;
	}

	.item {
		padding: 0 20rpx;
	}

	.checkbox-box {
		padding: 20rpx;
	}

	.checkbox-item {
		min-width: 165rpx;
		transform: scale(0.9);
	}

	.start-time {
		color: #ff001d;
		width: 300rpx;
		font-size: 24rpx;
		margin-right: 30rpx;
	}

	.end-time {
		color: #ff6600;
		width: 300rpx;
		font-size: 24rpx;
	}
</style>
